<template>
  <el-card class="task-timeline-card" shadow="never">
    <template #header>
      <div class="flex items-center">
        <el-icon style="margin-right: 8px;">
          <Clock/>
        </el-icon>
        <span>任务执行时间线</span>
      </div>
    </template>

    <div v-if="processedStages.length > 0">
      <el-timeline>
        <el-timeline-item
            v-for="(stage, index) in processedStages"
            :key="stage.id"
            :hollow="index !== 0"
            :timestamp="stage.createTime"
            :type="getStageType(stage.status)"
            placement="top"
        >
          <el-card class="timeline-item-card" shadow="hover">
            <h4 class="text-base font-semibold mb-2">{{ getStageName(stage.status) }}</h4>
            <p v-if="stage.description" class="text-sm text-gray-600 mb-2">{{ stage.description }}</p>
            <div v-if="stage.images && stage.images.length > 0" class="image-gallery">
              <el-image
                  v-for="(image, imgIndex) in stage.images"
                  :key="imgIndex"
                  :initial-index="imgIndex"
                  :preview-src-list="stage.images.map(img => img.url)"
                  :src="image.url"
                  class="timeline-image"
                  fit="cover"
              />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-empty v-else description="暂无任务执行阶段信息"></el-empty>
  </el-card>
</template>

<script setup>
import {computed, defineProps} from 'vue';
import {Clock} from '@element-plus/icons-vue';

const props = defineProps({
  task: {
    type: Object,
    required: true,
    default: () => ({
      taskStages: []
    })
  }
});

const processedStages = computed(() => {
  if (!props.task || !props.task.taskStages) {
    return [];
  }
  return [...props.task.taskStages];
});

const getStageName = (status) => {
  switch (status) {
    case 1:
      return '已接单';
    case 2:
      return '正在前往';
    case 3:
      return '物品已取到';
    case 4:
      return '等待确认';
    case 5:
      return '完成';
    default:
      return '未知状态';
  }
};

const getStageType = (status) => {
  switch (status) {
    case 1:
      return 'primary';
    case 2:
      return 'warning';
    case 3:
      return 'info';
    case 4:
      return 'info';
    case 5:
      return 'success';
    default:
      return 'info';
  }
};

const getStageColor = (status) => {
  return '#67C23A';
};
</script>

<style scoped>
.task-timeline-card {
  border-radius: 12px;
}

.timeline-item-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.timeline-item-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.timeline-item-card p {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 10px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.timeline-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  cursor: pointer;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

.timeline-image:hover {
  transform: scale(1.05);
}

:deep(.el-card__body) {
  padding: 5px 15px;
}
</style>
